<template>
	<view>
		<view class="bg-white u-p-l-24 u-p-r-24 u-m-t-26">
			<u-form ref="uform" :model="form" labelWidth="auto" :labelStyle="styleLab">
				<u-form-item label="旧密码" prop="oldPassword">
					<u-input type="password" v-model="form.oldPassword" placeholder="请输入" inputAlign="right"></u-input>
				</u-form-item>
				<u-form-item label="新密码" prop="password">
					<u-input type="password" v-model="form.password" placeholder="请输入" inputAlign="right"></u-input>
				</u-form-item>
				<u-form-item label="确认密码" prop="onPassword">
					<u-input type="password" v-model="form.onPassword" placeholder="请输入" inputAlign="right"></u-input>
				</u-form-item>
			</u-form>
		</view>

		<view class="u-p-l-24 u-p-r-24 u-m-t-60">
			<view class="btn" @click="reset">确定修改</view>
		</view>


	</view>
</template>

<script lang="ts" setup>
	import { onReady } from '@dcloudio/uni-app'
	import userApi from '@/api/user'
	import { reactive, ref } from "vue";

	import * as base64 from "base-64"
	import * as utf8 from "utf8"


	const styleLab = reactive({
		color: '#303442'
	})
	const uform = ref(null)
	const form = reactive({
		oldPassword:'',
		password:'',
		onPassword:''
	})



	const btnStyle = reactive({
		backgroudColor: '#ffc300'
	})

	const rules = reactive({
		oldPassword: {
			required: true,
			message: '请输入旧密码',
			trigger: ['blur', 'change']
		},
		password:[
			{
				min:6,
				message:"密码不低于6位",
				trigger: ['blur', 'change']
			},
			{
				required: true,
				message: '请输入新密码',
				trigger: ['blur', 'change']
			}
		],
		onPassword: [
			{
				required: true,
				message: '请输入',
				trigger: ['blur', 'change']
			},
			{
				validator: (rule, value, callback) => {
					 if(form.password === form['onPassword']){
						 return true
					 }else{
						 return false
					 }
				},
				message:'两次输入不一致'
			}
		],
	})

	function reset() {
		// uni.showLoading({
		// 	title: '加载中...'
		// })
		uform.value.validate(valid=>{
			if(valid){
				let obj = JSON.parse(JSON.stringify(form))
				// obj.oldPassword = toBase(obj.oldPassword)
				// obj.password = toBase(obj.password)
				userApi.modifyPassword(obj).then(res=>{
					uni.showToast({
						title:res.msg
					})
				})

			}else{

			}
		})

	}

	function toBase(str){
		let uft8Str = utf8.encode(str);
		let encodeStr = base64.encode(uft8Str);
		return encodeStr
	}


	onReady(() => {
		uform.value.setRules(rules)
	})
</script>

<style lang="scss" scoped>
	.btn {
		width: 90vw;
		line-height: 90upx;
		background-color: #ffc300;
		text-align: center;
		margin: 0 auto;
		font-size: 28upx;
		color: white;
		box-shadow: 0 6upx 12upx rgba(255, 195, 0, .5);
	}
</style>
